<!-- 主播详情 -->
<template>
  <div class="index-container">
    <div class="activity-detail-header-box">
      <GoBack />
      <div class="header-bg" style="filter: blur(5px)">
        <van-image
          height="180px"
          fit="cover"
          position="center"
          :src="anchorInfo.image[0]"
        ></van-image>
      </div>
    </div>
    <div class="activity-detail-main">
      <div class="activity-detail-main-head">
        <AvaterHead
          _width="48px"
          _height="48px"
          :url="anchorInfo.avatar"
          :name="anchorInfo.nickname"
          :labelsName="anchorInfo.labelsName"
          :anchorId="anchorId"
          :isFollow="anchorInfo.isFollow"
          @updateFollow="updateFollow"
        />
      </div>
      <van-list
        v-model:loading="loading"
        finished-text="没有更多了"
        :finished="finished"
        :immediate-check="true"
        @load="onLoad"
      >
        <div
          class="activity-detail-main-item"
          :key="item.id"
          v-for="item in dynamicData"
        >
          <div class="activity-detail-main-item-content">
            {{ item.content }}
          </div>
          <ActivivtyPhoto :photoList="item.dynamicImages" v-if="item.isBy" />
          <div class="lock-main" v-else>
            <van-grid :border="false" square :column-num="3">
              <van-grid-item v-for="item in item.dynamicImages" :key="item">
                <div class="grid-box-main grid-box-main-img">
                  <van-image
                    radius="8"
                    style="width: 100%; height: 100%"
                    fit="cover"
                    position="center"
                    :src="item"
                  />
                </div>
              </van-grid-item>
              <van-grid-item v-for="item in item.dynamicImgNum" :key="item">
                <div class="grid-box-main" @click="viewImg()">
                  <div class="grid-box-main-content">
                    <img src="../../assets/image/lock.png" />
                    <p>解锁</p>
                  </div>
                </div>
              </van-grid-item>
            </van-grid>
          </div>
          <div class="activity-detail-main-item-timer">
            {{ item.updateTime }}
          </div>
        </div>
      </van-list>
    </div>
    <!-- <div class="feature-main-foot footer-box">
      <div class="feature-main-box">
        <van-button type="primary" icon="live" round @click="openTelephone">视频通话</van-button>
        <van-button type="primary" icon="phone" round @click="openTelephone">语音通话</van-button>
      </div>
    </div> -->
  </div>
  <div class="video-chat" v-if="anchorInfo.isChat == 1">
    <div class="footer-box">
      <van-button round type="primary" :loading="isLoading" @click="bookingChat"
        >1v1视频私聊（{{ anchorInfo.chatPrice }}元/10分钟）</van-button
      >
    </div>
  </div>
  <van-popup
    v-model:show="show"
    close-icon="close"
    position="center"
    teleport="body"
    :closeable="false"
    :style="{ height: '30%', width: '60%', background: 'none' }"
  >
    <div class="top-up-gold-coin-content">
      <div class="top-up-gold-coin">
        <img src="../../assets/image/img12.png" />
        <div class="top-up-gold-coin-main">支付<span>5</span>金币解锁</div>
        <div class="action-btn">
          <van-button round size="small" type="success" @click="show = false"
            >关闭</van-button
          >
          <van-button
            round
            size="small"
            type="success"
            :loading="isLoading"
            @click="unlock"
            >解锁</van-button
          >
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

import icon_hand3 from "@/assets/image/icon_hand3.png";
import bgImg from "@/assets/image/01.png";
import AvaterHead from "@/components/activityAvaterItem/index.vue";
import ActivivtyPhoto from "@/components/activityItem/photo.vue";
import GoBack from "@/components/goBack/index.vue";

import { GetAnchorInfo, DynamicList } from "@/api/index.js";

import {
  CreateGoodsOrder, // 新增支付宝订单
} from "@/api/goods/index.js";

import {
  CreatePayOrder, // 新增微信订单
} from "@/api/mine/index.js";

import { showToast } from "vant";

const route = useRoute();
const router = useRouter();

const state = reactive({
  icon_hand3,
  bgImg,
  labelsColor: [
    "#ff5e95",
    "#feac20",
    "#21e4e0",
    "#9670ff",
    "#ff7ca0",
    "#4ea9fc",
  ],
  tabsList: [
    {
      id: 1,
      name: "动态",
    },
  ],
  anchorInfo: {
    image: [""],
    isFollow: false,
  },
});

const { tabsList, labelsColor, anchorInfo } = toRefs(state);
const emits = defineEmits(["GoldCoinRecharge"]);
let anchorId = ref();

const GetAnchorInfoData = async () => {
  let params = {
    anchorId: route.query.anchorId,
  };
  let { data } = await GetAnchorInfo(params);
  state.anchorInfo = data;
};

let loading = ref(false);
let finished = ref(false);
let dynamicData = ref([]);
const GetDynamicList = async () => {
  let { page, size } = state;
  let params = {
    page,
    size,
    anchorId: route.query.anchorId,
  };
  loading.value = true;
  let { data } = await DynamicList(params);
  dynamicData.value = dynamicData.value.concat(data.list);
  state.total = data.pagination.total;
  loading.value = false;
  if (dynamicData.value.length == data.pagination.total) {
    finished.value = true;
  }
};

const onLoad = () => {
  if (dynamicData.value.length < state.total && state.total != 0) {
    state.page++;
    GetDynamicList();
  }
};

const openTelephone = () => {
  showToast("功能开发中，敬请期待！");
};

const updateFollow = (ev) => {
  state.anchorInfo.isFollow = ev;
  console.log(ev, state.anchorInfo.isFollow);
};

let show = ref(false);
const viewImg = () => {
  show.value = true;
};

// 预约直播
const bookingChat = () => {
  payOrder();
};

let isLoading = ref(false);

let orderNum = ""
let isPay = true
const alipay = async () => {
  orderNum = "";
  isPay = false;
  let paramsorder = {
    goodsId: route.query.anchorId,
    orderType: 6,
  };
  isLoading.value = true;
  let datares = await CreateGoodsOrder(paramsorder);
  let resData = datares.data;
  isLoading.value = false;
  document.getElementById("payMent").innerHTML = resData;
  let namevalue = document.getElementsByName("biz_content")[0].value;
  orderNum = JSON.parse(namevalue);
  localStorage.setItem("out_trade_no", orderNum.out_trade_no);
  document.forms[0].setAttribute("target", "_self"); // 当前窗口跳转
  document.forms[0].submit();
  document.getElementById("payMent").innerHTML = "";
};

// 拉起微信支付
const onBridgeReady = (pay_info) => {
  console.log(WeixinJSBridge, "WeixinJSBridge222");
  if (WeixinJSBridge !== null) {
    WeixinJSBridge.invoke(
      "getBrandWCPayRequest",
      {
        appId: pay_info.appId, //appid
        timeStamp: pay_info.timeStamp, //时间戳，自1970年以来的秒数
        nonceStr: pay_info.nonceStr, //随机串
        package: pay_info.package,
        signType: pay_info.signType, //微信签名方式：
        paySign: pay_info.paySign, //微信签名
      },
      function (res) {
        console.log("====>: onBridgeReady -> res", res, pay_info);
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          isLoading.value = false;
          router.push({
            path: "/payResult",
            query: {
              out_trade_no: pay_info.out_trade_no,
            },
          });

          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
          isLoading.value = false;
          showToast("用户已取消");
        } else {
        }
      }
    );
  } else {
    console.log("不是在微信app内");
  }
};

const payOrder = async () => {
  if (is_weixn()) {
    let params = {
      openid: localStorage.getItem("openid"),
      goodsId: route.query.anchorId,
      orderType: 6,
    };
    isLoading.value = true;
    let { data } = await CreatePayOrder(params);
    console.log(params, "params", data);
    let pay_info = {
      appId: data.appId, //appid
      timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
      nonceStr: data.nonceStr, //随机串
      package: data.package,
      signType: data.signType, //微信签名方式：
      paySign: data.paySign, //微信签名
      out_trade_no: data.out_trade_no, //微信签名
    };
    onBridgeReady(pay_info);
  } else {
    alipay();
  }
  //
};

const initWeixinJSBridge = () => {
  if (typeof WeixinJSBridge === "object") {
  } else {
    // 微信JSBridge不存在，监听微信JSBridgeReady事件
    document.addEventListener("WeixinJSBridgeReady", () => {}, false);
  }
};

const is_weixn = () => {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
};
// 微信环境获取code
if (is_weixn()) {
  initWeixinJSBridge();
}

onMounted(() => {
  anchorId.value = route.query.anchorId;
  GetAnchorInfoData();
  GetDynamicList();
});
</script>



<style lang="scss" scoped>
.index-container {
  padding-top: 0;
}

.activity-detail-back {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  z-index: 9;
}
.header-bg {
  .van-image {
    display: block;
    width: 100%;
  }
}
.activity-detail-main {
  padding: 10px;
  position: relative;
  z-index: 69;
  border-radius: 15px 15px 0 0;
  margin-top: -20px;
  padding-bottom: 0;
  background: #fff;
}
.activity-detail-main-item {
  margin-top: 10px;
}
// .activity-detail-main-head {
//   padding: 10px;
// }
.activity-detail-main-item {
  padding-bottom: 10px;
  border-bottom: 1px solid #fafafa;
}

.activity-detail-main-item-content {
  color: #666;
}
.activity-detail-main-item-timer {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}

.feature-main-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  z-index: 9999;
  .van-button {
    margin: 5px;
    color: #fff;
    background: $default-color;
    border: none;
  }
}
:deep(.van-grid-item__content) {
  width: 100%;
  padding: 0 !important;
  .van-image {
    width: 100%;
    height: 100%;
    margin-bottom: 2px;
  }
}

.grid-box-main {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  width: 95%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  .grid-box-main-content {
    img {
      width: 40%;
      margin: 0 auto;
      display: block;
    }
    p {
      color: #fff;
      text-align: center;
      font-size: 14px;
      margin-top: 3px;
    }
  }
}
.grid-box-main-img {
  padding: 0;
}
.lock-main {
  position: relative;
  left: -5px;
  margin-top: 10px;
}
.top-up-gold-coin-content {
  padding: 20px 0;
}
.top-up-gold-coin {
  border-radius: 8px;
  background: #fff;
  img {
    display: block;
    margin: 0 auto;
    position: relative;
    top: -25px;
  }
}
.top-up-gold-coin-main {
  flex: none;
  width: 100%;
  text-align: center;
  margin-top: -10px;
  span {
    font-size: 24px;
    margin: 0 5px;
  }
}
:deep(.van-popup) {
  background: none;
}
.action-btn {
  display: flex;
  justify-content: center;
  padding: 20px;
  .van-button:nth-child(1) {
    background: #eee;
    color: #999;
  }
  .van-button {
    width: 60%;
    margin: 0 5px;
    padding: 0 20px;
    background: $default-color;
    border: none;
    color: #fff;
  }
}
.video-chat {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 10px;
  background: #fff;
  .van-button {
    background: $default-color;
    width: 100%;
    color: #fff;
    border: none;
  }
}
</style>
